<!--
Filename: d:\CODE\FTP\FTP_TEST\FTP\templates\index.html
Path: d:\CODE\FTP\FTP_TEST\FTP\templates
Created Date: Tuesday, May 10th 2022, 5:05:43 pm
Author: xiguan

Copyright (c) 2022 XiGuan Inc.
-->



<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左侧导航栏</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		
		<!-- <link rel="stylesheet" type="text/css" href="../static/css/page.css" /> -->
		<link rel="stylesheet" type="text/css" href="{{url_for("static", filename="css/page.css")}}" />
		<link rel="stylesheet" type= "text/css" href={{ url_for("static", filename="other/bootstrap.css") }}>
    	<link rel="stylesheet" type= "text/css" href={{ url_for("static", filename="other/bootstrap-switch.min.css") }}>
		
		<link rel="stylesheet" href="https://lib.sinaapp.com/js/bootstrap/4.2.1/css/bootstrap.min.css">
		
		<!-- <link href="../static/other/css/icons.min.css" rel="stylesheet" type="text/css" /> -->
		<link href="{{url_for("static", filename="other/css/icons.min.css")}}" rel="stylesheet" type="text/css" />
		
	</head>
	<body>
		<div class="page" id="app">
			<div class="nav-left">
				<div class="LogoName">
					FTP Cloud
				</div>
				<div class="navDiv">
					<div class="navName">导航</div>
					<div class="nav-list">
						<ul>
                            <li class="nav-tab  waves-effect">
								<a href="{{url_for("static" , filename="page/home.html")}}" class="li-a active" target="iframe" id="nva1"><i class='bx bx-home-smile'></i> 主页
									<span class="badge badge-pill badge-primary float-right"></span>
								</a>
							</li>
							<li class="nav-tab nav-ul">
								<a href="{{url_for("static", filename="page/page_1.html")}}" class="li-a" target="iframe"><i class='bx bx-layer'></i> 
                                    <text class="left-container-nav-title-select">目录管理</text>
									<!-- <i class='bx bx-chevron-right' style="float: right;"></i></a> -->
							</li>
							<li class="nav-tab nav-ul">
								<a href="{{url_for("static", filename="page/page_2.html")}}" class="li-a" target="iframe"><i class='bx bx-cog'></i>
                                    <text class="left-container-nav-title-basic">同步管理</text>
									<!-- <i class='bx bx-chevron-right' style="float: right;"></i></a> -->
							</li>
							<li class="nav-tab nav-ul">
								<a href="{{url_for("static", filename="page/page_3.html")}}" class="li-a" target="iframe"><i class='bx bx-buildings'></i>
                                    <text class="left-container-nav-title-basic">忽略列表</text>
									<!-- <i class='bx bx-chevron-right' style="float: right;"></i></a> -->
							</li>
							<li class="nav-tab nav-ul">
								<a href="{{url_for("static", filename="page/page_4.html")}}" class="li-a" target="iframe"><i class='bx bx-edit'></i>
                                    <text class="left-container-nav-title-basic">同步历史</text>
									<!-- <i class='bx bx-chevron-right' style="float: right;"></i></a> -->
							</li>
							
						</ul>
						
						
					</div>
				</div>
			</div>

			<!-- <button id="btn-exit" onclick="btn_exit()" class="button" style="vertical-align:middle" > <span >Exit </span></button> -->
			<div class="nav-right"> 
                <div class="nav-top">
                    <!-- <img src="../static/imgs/head-icon.png" class="text-right-img"> -->
					<img src="{{url_for("static", filename="imgs/head-icon.png")}}" class="text-right-img" id="head">
                    <text class="text-right-name">Welcome,dear__{{ user.username }}</text>
				</div>

				<div class="content-page">
					<iframe name="iframe" width="100%" height="100%" frameborder="0" 
					src="{{url_for("static", filename="page/home.html")}}"></iframe>
				</div>
			</div>
		</div>


		
		<script type="application/javascript" src="{{ url_for("static", filename="other/jquery-3.5.1.js") }}"></script>
		<script type="application/javascript" src="{{ url_for("static", filename="other/bootstrap.min.js") }}"></script>
		<script type="application/javascript" src="{{ url_for("static", filename="other/bootstrap-switch.min.js") }}"></script>
		<script type="application/javascript" src="{{ url_for("static", filename="other/bootbox.all.js") }}"></script>
		<!-- <script type="text/javascript" src="../static/other/jquery.min.js"></script> -->
		<script type="text/javascript" src="{{url_for("static", filename="other/jquery.min.js")}}"></script>
        <!-- <script type="text/javascript" src="../static/js/index.js"></script> -->
		<script type="text/javascript" src="{{url_for("static", filename="js/index.js")}}"></script>
		<script type="text/javascript">
			$(function() {
				let navflag = false;
				$('.nav-tab').click(function() {
					$(this).siblings().each(function() {
						$(this).removeClass('a_active');
						// $(this).removeClass('a_active');
						$(this).find('.nav-box').css('height', '0')
						//关闭右侧箭头
						if ($(this).attr('class').indexOf('nav-ul') != -1) {
							$(this).find('.bx-chevron-right').css('transform', 'rotateZ(0deg)')
							$(this).find('.bx-chevron-right').css('transition', 'all .5s')
							$(this).removeClass('nav-show')
							// $(this).find('div').removeClass('nav-box')
						}
					})
					//当前选中
					$(this).addClass('a_active')
					$(this).find('.li-a').addClass('active')
					// 打开右侧箭头
					$(this).find('.bx-chevron-right').css('transform', 'rotateZ(90deg)')
					$(this).find('.bx-chevron-right').css('transition', 'all .5s')
					$(this).addClass('nav-show')
					// $(this).find('div').addClass('nav-box')
				})
			})
			
		</script>
	</body>
</html>
